<template>
  <div class="dashboard-container">
    <div v-loading='loading' class="app-container">
      <el-card class="tree-card">
        <treeRoot :tree-root = 'compaly' :isshow= 'true' @addDepts='addDepts' />
        <el-tree :data='departs' :props='defaultProps' :default-expand-all='true'>
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
          <treeRoot slot-scope = '{ data }'
          :treeRoot='data'
          @delDate='getDpartments'
          @addDepts='addDepts'
          @editDepts='editDepts'
          />
        </el-tree>
      </el-card>
    </div>
    <addDept ref="addDept" :showDialog.sync='showDialog' :treeNode='node' @addDepts='getDpartments' />
  </div>
</template>

<script>
import treeRoot from './components/tree-loots.vue'
import { getDpartments } from '@/api/departments'
import { tranListToTreeDate } from '@/utils'
import addDept from './components/add-dept.vue'
export default {
  components: {
    treeRoot,
    addDept
  },
data() {
  return {
    compaly: { name: '', manager: '' },
    departs: [],
    defaultProps: {
      label: 'name' // 表示 从这个属性显示内容
    },
    showDialog: false, // 添加部门的弹出层的显示
    node: null, // 保存当前点击的部门信息
    loading: false // 用来控制进度弹层的显示和隐藏
  }
},
created() {
  this.getDpartments()
},
methods: {
  async getDpartments() {
    // 开启loading 效果
    this.loading = true
    // 调用接口 获取数据
    const result = await getDpartments()
    this.compaly = { name: result.companyName, manager: '负责人', id: ''}
    // 调用方法将线性数据转化为树形结构
    this.departs = tranListToTreeDate(result.depts, '')
    this.loading = false
  },
  addDepts (node) {
    this.showDialog = true // 显示弹层
    // node 是当前点击添加的部门，保存下来
    this.node = node
  },
  // 编辑节点
  editDepts(node){
    this.showDialog = true
    this.node = node // 储存传过来的node
    // 我们需要在这个位置 调用子组件的方法
    // 父组件 调用子组件的方法
    // 直接调用子组件中的方法 传入一个id
     this.$refs.addDept.getDepartDetail(node.id)
  }
}
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
